Skip to main content

yToggleButton

Description​

The yToggleButton is a versatile user interface component designed to allow users to toggle between multiple options dynamically. This component is especially useful in scenarios, where users need to switch between more than two states, such as changing themes, toggling settings, or any multi-state control.

Basic Structure​

The yToggleButton includes a main body that acts as the clickable area, with visually distinct states indicated by changes in background color, icon color, and typography. Each state can be customized with its own properties to clearly differentiate between the choices available to the user. Each Toggle Option stands as their own unit and will bring a label and or icon with it.

ToggleButton structure

Label​

The label contains the text inside the button. It is normally in the center of the unit, but can also be displayed on the right or left site. By changing the inner padding of the button, the label gets moved too. You can find further explanation at the Label Property.

Icon​

The icon can be used to show an icon inside a unit of the yToggleButton. You can only choose one icon per unit. You have to choose if you want to show labels or icons for the whole component. You can find further explanation at the Icon Property.

Properties​

Through its various properties the yToggleButton can be configured to suit your needs. The display below provides you with an overview of all the yToggleButton properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-toggle-button__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-toggle-button__component-type

The type of the component. For this component it is -toggle-button.

Name: name
String Property
--y-toggle-button__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-toggle-button__version

The custom version of the ToggleButton-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-toggle-button__core-theme

The CoreTheme, which will be apllied to the ToggleButton. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-toggle-button__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the ToggleButton. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-toggle-button__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-toggle-button__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-toggle-button__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-toggle-button__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-toggle-button__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-toggle-button__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-toggle-button__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-toggle-button__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-toggle-button__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-toggle-button__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-toggle-button__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-toggle-button__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-toggle-button__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-toggle-button__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-toggle-button__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-toggle-button__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-toggle-button__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-toggle-button__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-toggle-button__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yToggleButton in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

ToggleButton Elevated
Elevated
ToggleButton Flat
Flat
ToggleButton Outlined
Outlined
ToggleButton Rounded
Rounded
ToggleButton Plain
Plain
genericsizeminWidth200px
stylebackgroundbgColor__normaltransparent
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
stylecontentNormalcontentNormal__bgColor#44ddbb
stylecontentNormalcontentNormal__iconColor#FFFFFF
stylecontentHovercontentHover__bgColor#1DA284
stylecontentHovercontentHover__iconColor#FFFFFF
stylecontentFocuscontentFocus__bgColor#1DA284
stylecontentFocuscontentFocus__iconColor#44DDBB
stylecontentActivecontentActive__bgColor#1DA284
stylecontentActivecontentActive__iconColor#FFFFFF

Advanced Variations​

For advanced use cases, the yToggleButton can be tailored to fit different design aesthetics and functional requirements. Below are some enhanced variations that showcase the component’s versatility:

ToggleButton Icon Only
Icons Only
ToggleButton Label Only
Labels Only
genericsizeminWidth200px
stylecontentshowContentLabelfalse
stylecontentNormalcontentNormal__bgColor#F1F3F4
stylecontentNormalcontentNormal__fontColor#6200EE
stylecontentHovercontentHover__bgColor#F1F3F4
stylecontentHovercontentHover__fontColor#6200EE
stylecontentFocuscontentFocus__bgColor#F1F3F4
stylecontentFocuscontentFocus__fontColor#6200EE
stylecontentActivecontentActive__bgColor#6C6E74
stylecontentActivecontentActive__fontColor#3700B3

Setting the Toggle Options List​

Setting up the toggle-options-list and defining the active value are crucial for leveraging the yToggleButton to its fullest potential.

How to:

  1. Open Detail Panel: Use the Toolbar to access detailed settings.
  2. Navigate to Component category unfold the Misc Group and edit toggle-options-list to add new options or modify and delete existing ones.

Setting the Active Value​

The active-toggle-option can be set in the same Misc group area inside the Component category, where a simple input field allows you to define which option is currently active.

How to:

  1. Open Detail Panel and navigate to Component, unfold the Misc Group, where you can set active-toggle-option.

JavaScript Interaction Example​

To programmatically change the active option of a yToggleButton, you can use the following JavaScript snippet.

How to:

  1. Open Detail Panel and navigate to Events, unfold the Input Group, where you can set EvtClicked.

Code example:

ToggleButton EvtClicked
// function onToggleButton_2_EvtClicked (apiObject, component, eventData) {
component.set("misc", "activeToggleOption", newActiveOption);
console.log(`Active toggle option set to: ${newActiveOption}`);
// }

This function retrieves the toggle button component via its unique name, then sets the active option using the API's set method, which updates the component's state accordingly.

Changing content based on active option​

You could use a yToggleButton for conditions that change the UI of your application.

How to:

  1. Create a yTextbox with empty value.
  2. Select the yToggleButton again.
  3. Open the Detail Panel, go to Events, unfold Input and edit EvtClicked.
  4. Insert the snippet down below.

Code example:

This example changes the value of a textbox, based on the selected option of the yToggleButton.

ToggleButton EvtClicked
// function onToggleButton_2_EvtClicked (apiObject, component, eventData) {
const activeOption = eventData.data;
const list = [
  { id: "option1", content: "Hello there!" },
  { id: "option2", content: "This is an example" },
  { id: "option3", content: "These are not the droids you're looking for." },
];

const foundOption = list.find((entry) => entry.id === activeOption);

const textbox = apiObject.ui.getObject(3, "y-textbox", "y-page", 1);
textbox.set("style", "content", "value", `<p>${foundOption.content}</p>`);
// }